<!DOCTYPE html>
<html>

<head>
  <title>Vue3.0</title>
  <meta charset='utf-8'>
  <link href='https://cdn.maxiang.io/res-min/themes/marxico.css' rel='stylesheet'>
  <style>
    .note-content {
      font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "WenQuanYi Micro Hei", SimSun, Song, sans-serif;
    }

    #preview-contents {
      margin-top: -20px;
    }
  </style>
</head>

<body>
  <div id='preview-contents' class='note-content'>
    <h4>Vue3新特性全面剖析</h4>
    <p><code>Performance [pəˈfɔːməns]</code></p>
    <ul>
      <li>
        <p>重写了虚拟DOM的实现（跳过静态节点，只处理动态节点）</p>
      </li>
      <li>
        <p>update性能提高1.3~2倍</p>
      </li>
      <li>
        <p>SSR速度提高了2~3倍</p>
      </li>
    </ul>

    <p><code>Tree shaking [ˈʃeɪkɪŋ]</code></p>
    <ul>
      <li>
        <p>可以将无用模块“剪辑”，仅打包需要的</p>
      </li>
    </ul>

    <p><code>Proxy [ˈprɒksi]</code></p>
    <ul>
      <li>
        <p>响应式原理不再基于 Object.defineProperty</p>
      </li>
      <li>
        <p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy"
            target="_blank">https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy</a>
        </p>
      </li>
    </ul>

    <p><code>&lt;Teleport&gt; [ˈtelɪpɔːt]</code></p>
    <ul>
      <li>
        <p>以前称为<code>&lt;Portal&gt; [ˈpɔːtl]</code>，译作传送门</p>
      </li>
    </ul>

    <p><code>&lt;Suspense&gt; [səˈspens]</code></p>
    <ul>
      <li>
        <p>可在嵌套层级中等待嵌套的异步依赖项</p>
      </li>
    </ul>

    <p><code>TypeScript</code></p>
    <ul>
      <li>
        <p>更好的TypeScript支持</p>
      </li>
    </ul>

    <p><code>Custom Renderer API</code></p>
    <ul>
      <li>
        <p>自定义渲染器API</p>
      </li>
      <li>
        <p>用户可以尝试WebGL自定义渲染器</p>
      </li>
    </ul>

    <p><code>Fragment ['frægmənt]</code></p>
    <ul>
      <li>
        <p>不再限于模板中的单个根节点</p>
      </li>
    </ul>

    <p><code>Composition [ˌkɒmpəˈzɪʃn] API</code></p>
    <ul>
      <li>
        <p>组合式API，替换原有的 Options [ˈɒpʃnz] API</p>
        <ul>
          <li>
            <p>根据逻辑相关性组织代码，提高可读性和可维护性</p>
          </li>
          <li>
            <p>更好的重用逻辑代码（避免mixins混入时命名冲突的问题）</p>
          </li>
        </ul>
      </li>
      <li>
        <p>但是依然可以延用 Options [ˈɒpʃnz] API</p>
      </li>
    </ul>
    <p><img longdesc="./1592899685510.png" alt="Alt text" title="" type="image/png"
        src=""
        class=""></p>

    <p><code>Functional Programming 函数式编程</code></p>
    <ul>
      <li>
        <p>不再具备Vue类</p>
      </li>
      <li>
        <p>...</p>
      </li>
    </ul>

    <hr>

    <h4>掌握setup和响应式系统API</h4>
    <blockquote>
      <p><a href="https://vue-composition-api-rfc.netlify.app/zh/api.html"
          target="_blank">https://vue-composition-api-rfc.netlify.app/zh/api.html</a></p>
    </blockquote>

    <p><strong>setup</strong></p>
    <blockquote>
      <p>setup 函数是一个新的组件选项，作为在组件内使用 Composition API 的入口点</p>

      <ul>
        <li>
          <p>初始化props和beforeCreate之间调用</p>
        </li>
        <li>
          <p>可以接收 props 和 context</p>
        </li>
        <li>
          <p>this在setup()中不可用</p>
        </li>
      </ul>
    </blockquote>

    <p>props是响应式的，可以基于watchEffect/watch监听，解构赋值后则无效</p>
    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
</div><div class="hljs-line">  <span class="hljs-attr">props</span>: {
</div><div class="hljs-line">    <span class="hljs-attr">title</span>: <span class="hljs-built_in">String</span>,
</div><div class="hljs-line">  },
</div><div class="hljs-line">  setup(props) {
</div><div class="hljs-line">    watchEffect(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
</div><div class="hljs-line">      <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`title is: `</span> + props.title);
</div><div class="hljs-line">    });
</div><div class="hljs-line">  }
</div><div class="hljs-line">};
</div></code></pre>

    <p>返回的结果可以直接在模板中渲染使用</p>
    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
</div><div class="hljs-line">  <span class="hljs-attr">props</span>: { <span class="hljs-attr">title</span>: <span class="hljs-built_in">String</span> },
</div><div class="hljs-line">  setup() {
</div><div class="hljs-line">    <span class="hljs-keyword">let</span> supNum = <span class="hljs-number">0</span>,
</div><div class="hljs-line">      oppNum = <span class="hljs-number">0</span>;
</div><div class="hljs-line">    <span class="hljs-keyword">let</span> change = <span class="hljs-function"><span class="hljs-params">lx</span> =&gt;</span> {
</div><div class="hljs-line">      lx === <span class="hljs-number">0</span> ? supNum++ : oppNum++;
</div><div class="hljs-line">    };
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> {
</div><div class="hljs-line">      supNum,
</div><div class="hljs-line">      oppNum,
</div><div class="hljs-line">      change
</div><div class="hljs-line">    };
</div><div class="hljs-line">  }
</div><div class="hljs-line">};
</div></code></pre>

    <p><strong>ref</strong></p>
    <blockquote>
      <p>接受一个参数值并返回一个响应式且可改变的 ref 对象</p>
      <ul>
        <li>
          <p>ref 对象拥有一个指向内部值的单一属性 .value</p>
        </li>
        <li>
          <p>当ref在模板中使用的时候，它会自动解套，无需在模板内额外书写 .value</p>
        </li>
      </ul>
    </blockquote>

    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">"vue"</span>;
</div><div class="hljs-line"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
</div><div class="hljs-line">  setup() {
</div><div class="hljs-line">    <span class="hljs-keyword">let</span> supNum = ref(<span class="hljs-number">0</span>),
</div><div class="hljs-line">      oppNum = ref(<span class="hljs-number">0</span>);
</div><div class="hljs-line">    <span class="hljs-keyword">let</span> change = <span class="hljs-function"><span class="hljs-params">lx</span> =&gt;</span> {
</div><div class="hljs-line">      lx === <span class="hljs-number">0</span> ? supNum.value++ : oppNum.value++;
</div><div class="hljs-line">    };
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> {
</div><div class="hljs-line">      supNum,
</div><div class="hljs-line">      oppNum,
</div><div class="hljs-line">      change
</div><div class="hljs-line">    };
</div><div class="hljs-line">  }
</div><div class="hljs-line">};
</div></code></pre>

    <p><strong>reactive</strong></p>
    <blockquote>
      <p>接收一个普通对象然后返回该普通对象的响应式代理 <br>
        等同于 2.x 的 Vue.observable()</p>
      <ul>
        <li>
          <p>响应式转换是“深层的”：会影响对象内部所有嵌套的属性</p>
        </li>
      </ul>
    </blockquote>

    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">import</span> { ref, reactive } <span class="hljs-keyword">from</span> <span class="hljs-string">"vue"</span>;
</div><div class="hljs-line"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
</div><div class="hljs-line">  <span class="hljs-attr">props</span>: { <span class="hljs-attr">title</span>: <span class="hljs-built_in">String</span> },
</div><div class="hljs-line">  setup() {
</div><div class="hljs-line">    <span class="hljs-keyword">let</span> state = reactive({
</div><div class="hljs-line">      <span class="hljs-attr">supNum</span>: <span class="hljs-number">0</span>,
</div><div class="hljs-line">      <span class="hljs-attr">oppNum</span>: <span class="hljs-number">0</span>,
</div><div class="hljs-line">      <span class="hljs-attr">arr</span>: [<span class="hljs-number">10</span>, <span class="hljs-number">20</span>]
</div><div class="hljs-line">    });
</div><div class="hljs-line">    <span class="hljs-keyword">let</span> change = <span class="hljs-function"><span class="hljs-params">lx</span> =&gt;</span> {
</div><div class="hljs-line">      lx === <span class="hljs-number">0</span> ? state.supNum++ : state.oppNum++;
</div><div class="hljs-line">      <span class="hljs-comment">// 比Object.defineProperty好用在于：对于数据或者并未初始化的对象成员，都可以随意修改值，而且具备响应式的效果</span>
</div><div class="hljs-line">      state.arr[<span class="hljs-number">0</span>] = state.arr[<span class="hljs-number">0</span>] + <span class="hljs-number">1</span>;
</div><div class="hljs-line">      state.name = <span class="hljs-string">"珠峰"</span>;
</div><div class="hljs-line">    };
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> {
</div><div class="hljs-line">      <span class="hljs-comment">//...toRefs(state),</span>
</div><div class="hljs-line">      state,
</div><div class="hljs-line">      change
</div><div class="hljs-line">    };
</div><div class="hljs-line">  }
</div><div class="hljs-line">};
</div></code></pre>

    <p><strong>unref / toRef / toRefs / isRef / isProxy / isReactive / isReadonly</strong></p>
    <p><strong>readonly</strong></p>
    <blockquote>
      <p>传入一个对象（响应式或普通）或 ref，返回一个原始对象的只读代理 <br>
        一个只读的代理是“深层的”，对象内部任何嵌套的属性也都是只读的</p>
    </blockquote>

    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">const</span> original = reactive({ <span class="hljs-attr">count</span>: <span class="hljs-number">0</span> })
</div><div class="hljs-line"><span class="hljs-keyword">const</span> copy = readonly(original)
</div><div class="hljs-line">watchEffect(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
</div><div class="hljs-line">  <span class="hljs-comment">// 依赖追踪</span>
</div><div class="hljs-line">  <span class="hljs-built_in">console</span>.log(copy.count)
</div><div class="hljs-line">});
</div><div class="hljs-line"><span class="hljs-comment">// original 上的修改会触发 copy 上的侦听</span>
</div><div class="hljs-line">original.count++;
</div><div class="hljs-line"><span class="hljs-comment">// 无法修改 copy 并会被警告</span>
</div><div class="hljs-line">copy.count++; <span class="hljs-comment">// warning!</span>
</div></code></pre>
    <p><strong>computed</strong></p>
    <blockquote>
      <p>传入一个 getter 函数，返回一个默认不可手动修改的 ref 对象</p>
    </blockquote>

    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">const</span> count = ref(<span class="hljs-number">1</span>);
</div><div class="hljs-line"><span class="hljs-keyword">const</span> plusOne = computed(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> count.value + <span class="hljs-number">1</span>);
</div><div class="hljs-line"><span class="hljs-built_in">console</span>.log(plusOne.value); <span class="hljs-comment">//2</span>
</div><div class="hljs-line">plusOne.value++; <span class="hljs-comment">//错误！</span>
</div></code></pre>
    <blockquote>
      <p>或者传入一个拥有 get 和 set 函数的对象，创建一个可手动修改的计算状态</p>
    </blockquote>

    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">const</span> count = ref(<span class="hljs-number">1</span>);
</div><div class="hljs-line"><span class="hljs-keyword">const</span> plusOne = computed({
</div><div class="hljs-line">  <span class="hljs-attr">get</span>: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> count.value + <span class="hljs-number">1</span>,
</div><div class="hljs-line">  <span class="hljs-attr">set</span>: <span class="hljs-function"><span class="hljs-params">val</span> =&gt;</span> {
</div><div class="hljs-line">    count.value = val - <span class="hljs-number">1</span>;
</div><div class="hljs-line">  }
</div><div class="hljs-line">});
</div><div class="hljs-line">plusOne.value = <span class="hljs-number">1</span>;
</div><div class="hljs-line"><span class="hljs-built_in">console</span>.log(count.value); <span class="hljs-comment">//0</span>
</div></code></pre>

    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">import</span> { ref, reactive, toRefs, computed } <span class="hljs-keyword">from</span> <span class="hljs-string">"vue"</span>;
</div><div class="hljs-line"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
</div><div class="hljs-line">  <span class="hljs-attr">props</span>: { <span class="hljs-attr">title</span>: <span class="hljs-built_in">String</span> },
</div><div class="hljs-line">  setup() {
</div><div class="hljs-line">    ......
</div><div class="hljs-line">    <span class="hljs-comment">// 计算属性</span>
</div><div class="hljs-line">    <span class="hljs-keyword">let</span> ratio = computed({
</div><div class="hljs-line">      <span class="hljs-attr">get</span>: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
</div><div class="hljs-line">        <span class="hljs-keyword">let</span> total = state.supNum + state.oppNum;
</div><div class="hljs-line">        <span class="hljs-keyword">return</span> total === <span class="hljs-number">0</span>
</div><div class="hljs-line">          ? <span class="hljs-string">"--"</span>
</div><div class="hljs-line">          : ((state.supNum / total) * <span class="hljs-number">100</span>).toFixed(<span class="hljs-number">2</span>) + <span class="hljs-string">"%"</span>;
</div><div class="hljs-line">      }
</div><div class="hljs-line">    });
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> {
</div><div class="hljs-line">      ......,
</div><div class="hljs-line">      ratio
</div><div class="hljs-line">    };
</div><div class="hljs-line">  }
</div><div class="hljs-line">};
</div></code></pre>

    <p><strong>watchEffect</strong></p>
    <blockquote>
      <p>立即执行传入的一个函数，并响应式追踪其依赖，并在其依赖变更时重新运行该函数</p>
    </blockquote>

    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
</div><div class="hljs-line">  <span class="hljs-attr">props</span>: {
</div><div class="hljs-line">    <span class="hljs-attr">title</span>: <span class="hljs-built_in">String</span>,
</div><div class="hljs-line">  },
</div><div class="hljs-line">  setup(props) {
</div><div class="hljs-line">    watchEffect(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
</div><div class="hljs-line">      <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`title is: `</span> + props.title);
</div><div class="hljs-line">    });
</div><div class="hljs-line">  }
</div><div class="hljs-line">};
</div></code></pre>

    <p><strong>watch</strong></p>
    <blockquote>
      <p>watch API 完全等效于 2.x this.$watch </p>
      <ul>
        <li>
          <p>watch 需要侦听特定的数据源，并在回调函数中执行副作用</p>
        </li>
        <li>
          <p>默认情况是懒执行的，也就是说仅在侦听的源变更时才执行回调</p>
        </li>
      </ul>
    </blockquote>

    <p>侦听单个数据源</p>
    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-comment">// 侦听器的数据源可以是一个拥有返回值的 getter 函数，也可以是 ref</span>
</div><div class="hljs-line"><span class="hljs-keyword">const</span> state = reactive({ <span class="hljs-attr">count</span>: <span class="hljs-number">0</span> })
</div><div class="hljs-line">watch(
</div><div class="hljs-line">  <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> state.count,
</div><div class="hljs-line">  (count, prevCount) =&gt; {
</div><div class="hljs-line">    <span class="hljs-comment">/* ... */</span>
</div><div class="hljs-line">  }
</div><div class="hljs-line">);
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-keyword">const</span> count = ref(<span class="hljs-number">0</span>)
</div><div class="hljs-line">watch(count, (count, prevCount) =&gt; {
</div><div class="hljs-line">  <span class="hljs-comment">/* ... */</span>
</div><div class="hljs-line">});
</div></code></pre>
    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">import</span> { ref, reactive, toRefs, computed, watch } <span class="hljs-keyword">from</span> <span class="hljs-string">"vue"</span>;
</div><div class="hljs-line"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
</div><div class="hljs-line">  setup() {
</div><div class="hljs-line">    ....
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    let ratio = ref(<span class="hljs-string">"--"</span>);
</div><div class="hljs-line">    watch(state, (state, preState) =&gt; {
</div><div class="hljs-line">      <span class="hljs-keyword">let</span> total = state.supNum + state.oppNum;
</div><div class="hljs-line">      ratio.value =
</div><div class="hljs-line">        total === <span class="hljs-number">0</span> ? <span class="hljs-string">"--"</span> : ((state.supNum / total) * <span class="hljs-number">100</span>).toFixed(<span class="hljs-number">2</span>) + <span class="hljs-string">"%"</span>;
</div><div class="hljs-line">    });
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> {
</div><div class="hljs-line">      ...,
</div><div class="hljs-line">      ratio
</div><div class="hljs-line">    };
</div><div class="hljs-line">  }
</div><div class="hljs-line">};
</div><div class="hljs-line"><wbr>
</div></code></pre>


    <h4>掌握新生命周期函数和模板refs的使用</h4>
    <p><strong>模板 Refs</strong></p>
    <blockquote>
      <p>当使用组合式 API 时，reactive refs 和 template refs 的概念已经是统一的</p>
    </blockquote>
    <pre class="prettyprint hljs-dark"><code class="hljs xml"><div class="hljs-line"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
</div><div class="hljs-line">  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"root"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</div><div class="hljs-line"><span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span>
</div><div class="hljs-line"><span class="javascript">  <span class="hljs-keyword">import</span> { ref, onMounted } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;</span>
</div><div class="hljs-line"><span class="javascript">  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {</span>
</div><div class="hljs-line"><span class="javascript">    setup() {</span>
</div><div class="hljs-line"><span class="javascript">      <span class="hljs-keyword">const</span> root = ref(<span class="hljs-literal">null</span>);</span>
</div><div class="hljs-line"><span class="javascript">      onMounted(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {</span>
</div><div class="hljs-line"><span class="javascript">        <span class="hljs-built_in">console</span>.log(root.value);</span>
</div><div class="hljs-line"><span class="javascript">      });</span>
</div><div class="hljs-line"><span class="javascript">      <span class="hljs-keyword">return</span> {</span>
</div><div class="hljs-line"><span class="javascript">        root</span>
</div><div class="hljs-line"><span class="javascript">      };</span>
</div><div class="hljs-line"><span class="javascript">    }</span>
</div><div class="hljs-line"><span class="javascript">  }</span>
</div><div class="hljs-line"><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</div></code></pre>

    <p><strong>生命周期函数</strong></p>
    <blockquote>
      <p>可以直接导入 onXXX 一族的函数来注册生命周期钩子</p>
      <ul>
        <li>
          <p>这些生命周期钩子注册函数只能在 setup() 期间同步使用</p>
        </li>
        <li>
          <p>在卸载组件时，生命周期钩子内部同步创建的侦听器和计算状态也将删除</p>
        </li>
      </ul>
    </blockquote>
    <p><img longdesc="./1592908086322.png" alt="Alt text" title="" type="image/png"
        src=""
        class=""></p>


    <h4>掌握Vue3.0自定义指令处理技巧</h4>
    <pre
      class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">directive</span>(<span class="hljs-params">app</span>) </span>{</div><div class="hljs-line">    app.directive(<span class="hljs-string">'xxx'</span>, {</div><div class="hljs-line">        <span class="hljs-comment">// 指令首次绑定到元素且在安装父组件之前...「等同于bind」</span></div><div class="hljs-line">        beforeMount(el, binding, vnode, prevVnode) {</div><div class="hljs-line">            <span class="hljs-comment">// binding:数据对象</span></div><div class="hljs-line">            <span class="hljs-comment">//   + arg:传给指令的参数   v-xxx:n -&gt; arg:"n"</span></div><div class="hljs-line">            <span class="hljs-comment">//   + modifiers:修饰符对象 v-xxx.stop -&gt; modifiers:{stop:true}</span></div><div class="hljs-line">            <span class="hljs-comment">//   + value:指令绑定的值   v-xxx="1+1" -&gt; value:2</span></div><div class="hljs-line">            <span class="hljs-comment">//   + oldValue:之前绑定的值</span></div><div class="hljs-line">        },</div><div class="hljs-line">        <span class="hljs-comment">// 安装绑定元素的父组件时...「等同于inserted」</span></div><div class="hljs-line">        mounted() {},</div><div class="hljs-line">        <span class="hljs-comment">// 在包含组件的VNode更新之前...</span></div><div class="hljs-line">        beforeUpdate() {},</div><div class="hljs-line">        <span class="hljs-comment">// 在包含组件的VNode及其子VNode更新后...「等同于componentUpdated」</span></div><div class="hljs-line">        updated() {},</div><div class="hljs-line">        <span class="hljs-comment">// 在卸载绑定元素的父组件之前...</span></div><div class="hljs-line">        beforeUnmount() {},</div><div class="hljs-line">        <span class="hljs-comment">// 指令与元素解除绑定且父组件已卸载时...「等同于unbind」</span></div><div class="hljs-line">        unmounted() {}</div><div class="hljs-line">    });</div><div class="hljs-line">};</div><div class="hljs-line"><wbr></div><div class="hljs-line"><span class="hljs-comment">// main.js</span></div><div class="hljs-line"><span class="hljs-keyword">import</span> {</div><div class="hljs-line">    createApp</div><div class="hljs-line">} <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;</div><div class="hljs-line"><span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">'./App.vue'</span>;</div><div class="hljs-line"><span class="hljs-keyword">import</span> directive <span class="hljs-keyword">from</span> <span class="hljs-string">'./directive'</span>;</div><div class="hljs-line"><span class="hljs-keyword">const</span> app = createApp(App);</div><div class="hljs-line">directive(app);</div><div class="hljs-line">app.mount(<span class="hljs-string">'#app'</span>);</div></code></pre>
  </div>
</body>

</html>